<!--
 * @Descripttion: 角色关联功能清单
 * @Author: YuZhenJing
 * @Date: 2020-01-15 09:58:45
 * @LastEditors: YuZhenJing
 * @LastEditTime: 2020-03-20 15:33:31
 -->
<template>
  <div class="role-join-menu">
    <tf-drawer :footerShow="true" :title="title" :visible.sync="tfVisible">
      <template v-slot:content>
        <div style="padding:5px;">
          <el-row>
            <el-col :span="24">
              <el-input
                clearable
                placeholder="输入想查询的功能清单进行过滤"
                style="margin-bottom:5px;"
                v-model="filterText"
              ></el-input>
            </el-col>
          </el-row>
          <el-card shadow="never" style="height:calc(100vh - 175px)">
            <el-tree
              :data="menuTreeData"
              :default-checked-keys="defaultCheckedKeys"
              :filter-node-method="filterNode"
              :render-content="renderContent"
              default-expand-all
              highlight-current
              node-key="funListCode"
              ref="roleJoinMenuTree"
              show-checkbox
            ></el-tree>
          </el-card>
        </div>
      </template>
      <template v-slot:footer>
        <el-row>
          <el-col
            :span="24"
            style="text-align:center;height:60px;line-height:60px;"
          >
            <el-button
              :loading="saveLoading"
              @click="submitJoinFun"
              icon="el-icon-circle-plus-outline"
              type="primary"
              >保存关联</el-button
            >
          </el-col>
        </el-row>
      </template>
    </tf-drawer>
    <role-join-points
      @choicePoints="choicePoints"
      ref="roleMenuPointsRef"
    ></role-join-points>
  </div>
</template>
<script>
import * as roleJoinMenuService from '@/service/roles/roleJoinMenu'
export default {
  components: {
    'tf-drawer': require('@/components/common/drawer/TfDrawer').default,
    'role-join-points': require('@/components/module/roles/RoleMenuPoints')
      .default
  },
  watch: {
    filterText(val) {
      this.$refs.roleJoinMenuTree.filter(val)
    }
  },
  data() {
    return {
      tfVisible: false,
      title: '分配功能清单',
      roleId: '',
      menuTreeData: [],
      defaultCheckedKeys: [],
      filterText: '',
      saveLoading: false,
      funListPoints: {}
    }
  },
  methods: {
    ...roleJoinMenuService,
    show(roleId) {
      if (roleId) {
        this.defaultCheckedKeys = []
        this.menuTreeData = []
        this.filterText = ''
        this.funListPoints = {}
        this.roleId = roleId
        this.getMenuData()
        this.tfVisible = true
      } else {
        this.$alert('角色编码不能为空，无法进入功能点管理', '提示', {
          type: 'warning',
          confirmButtonText: '确定'
        })
      }
    },
    // 过滤节点
    filterNode(value, data) {
      if (!value) return true
      return data.funListName.indexOf(value) !== -1
    },
    // 获取选中的功能清单编码（功能类）
    getCheckedData() {
      let dataAll = this.$refs.roleJoinMenuTree.getCheckedNodes()
      let savaMenu = []
      dataAll.map(item => {
        if (item.funListType == 'function') {
          savaMenu.push(item.funListCode)
        }
      })
      return savaMenu
    },
    // 自定义节点
    renderContent(h, { node, data, store }) {
      const _iconByType = () => {
        if (data.funListType == 'group') {
          return (
            <i
              class="el-icon-c-scale-to-original"
              style="color:rgb(123, 124, 125); cursor:pointer"
            ></i>
          )
        } else {
          return (
            <i
              on-click={() => this.selectedPoints(data)}
              class="el-icon-c-scale-to-original text-primary"
              style="cursor:pointer"
            ></i>
          )
        }
      }
      return (
        <span class="custom-tree-node">
          <span>
            {h('span', [
              h('i', {
                class: data.funListIcon
              }),
              h('span', data.funListName)
            ])}
          </span>
          <span>{_iconByType()}</span>
        </span>
      )
    },
    // 选择功能点
    selectedPoints(data) {
      // 已选择的功能点
      let alreadyChecked = this.funListPoints[data.funListCode]
      this.$refs.roleMenuPointsRef.show(data, this.roleId, alreadyChecked)
    },
    // 确认选择的功能点集合
    choicePoints(pointsObj) {
      this.funListPoints[pointsObj.funListCode] = pointsObj.pointCodes
    }
  }
}
</script>
<style lang="stylus" scope>
.custom-tree-node
  flex 1
  display flex
  align-items center
  justify-content space-between
  font-size 14px
  padding-right 8px
  i
    font-size 16px
</style>
